<template>
  <div class="about">
    <h1>This is an vuex page</h1>
    <div>
      <div>index/info name:{{ infoName }}</div>
      <div>
        <el-button @click="editInfoName">修改 index/index name</el-button>
      </div>
    </div>
    <div>
      <div>name:{{ name }}</div>
      <div>
        <el-button @click="editName">修改 store name</el-button>
      </div>
    </div>
    <div>
      <div> list.type :{{ list.type }}</div>
      <div>
        <el-button @click="editListType">修改 list.type</el-button>
      </div>
    </div>
    <div>
      <div> list.child 循环</div>
      <ul>
        <li v-for="item in list.child" :key="item">{{ item }}</li>
      </ul>
      <div>
        <el-button @click="editListChild">修改 list.child[1]</el-button>
      </div>
    </div>
  </div>
</template>
<script>
// const { $_setData } = require("/src/utils/setData");
const { mapState } = require("vuex").default;
export default {
  data(){
    return {
      
    }
  },
  computed:{
    ...mapState(["name","list"])
    ,...mapState({
      infoName:state=> state.a.name
    })
  },
  methods:{
    editName(){
      // console.log( this.$store )
      this.$store.$_commit({
        name:456
      });
    }
    ,editListType(){
      this.$store.$_commit({
        "list.type": 789
      });
    }
    ,editListChild(){
      this.$store.$_commit({
        "list.child[1]": 123
      });
    }
    ,editInfoName(){
      // console.log( this.$store ); return;
      this.$store.$_commit({
        "name": 123
      },"a");
    }
  }  
}
</script>